<template lang="pug">

.GameItemDetailChange
    .gameItemCard
        GameItemCard(:style="{display:'block'}" :gi="NewGame")
        span.to_change_span(@click="ToChangePanel") To Details
        span.is_game_disable(:style="{background:NewGame.disable ? '#ababab':'#81ec9f', color: NewGame.disable ? '#b74b4b':'#5b769b'}") {{NewGame.disable}}
    .game_detail_change(v-if="itemPanel" @mouseleave ="NotFous")
        .op_bar
            .update_game_details(@click="update_game_details") Click To Update Details
            .is_game_disable(@click="NewGame.disable=!NewGame.disable") Disable
        .confirmationUpdate(v-show="IsShowConfirmation")
            .cancel(@click="cancelChange") cancel
            .info Check what you changed
            .confirm(@click="confirmChange") confirm
        .game_flex_column(:style="{'pointer-events': IsShowConfirmation ?  'none':'auto'}")
            .game_header
                .game_id(:style="{color:IsExistGameId?'red':'green', 'pointer-events': IsExistGameId ?  'none':'auto'}") AppId:{{NewGame.steam_appid}}
                    input(type="text" v-model="NewGame.steam_appid")
                .game_name {{NewGame.name?NewGame.name:'None'}}
                    input(type="text" v-model="NewGame.name")
                .change_input
                    img(:src="NewGame?.header_image")
                    input(type="text" v-model="NewGame.header_image")
                .game_header_column
                    .game_header_short {{NewGame?.short_description}}
                        input(type="text" v-model="NewGame.short_description")
                    .game_header_info(v-for="(item,index) in game_header_fun()" :key="index") {{item.msg}} : {{item.data}}
                        input(type="text" v-model="item.vmode")
            .game_user_op
                //.game_movie(v-if="NewGame?.movies")
                //    MovieBar(:movies="NewGame?.movies")
                .game_price
                    .game_name
                        a(:href="NewGame?.website ? NewGame?.website :'#/game/'+NewGame?.steam_appid" target="_blank")  👉🏻 {{NewGame?.name}}
                        input(type="text" v-model="NewGame.website")
                    .game_own_state
                        .game_purchase_discount
                            .game_purchase_discount_bg
                                .discount_free {{ discount_free ? 'Free': "discount_pct"}}:
                                .discount_pct(v-show="!discount_free" ) {{discount_pct}}%
                                .discount_prices
                                    .game_price_init  initial {{NewGame?.price_overview?.initial}}
                                    input(type="text" v-model="NewGame.price_overview.initial")
                                    .game_price_final final {{NewGame?.price_overview?.final}}
                                    input(type="text" v-model="NewGame.price_overview.final")
                                    .game_price_final currency {{NewGame?.price_overview?.currency}}
                                    input(type="text" v-model="NewGame.price_overview.currency")

            .game_page_content
                .game_about_the_game
                    .title About The Game
                    div(v-html="NewGame?.about_the_game" )
                    input(type="text" v-model="NewGame.about_the_game")

                .game_content_center
                    .game_reviews
                        .title Game Reviews
                        div(v-html="NewGame?.reviews" )
                    .legal_notice
                        .title Legal Notice
                        div(v-html="NewGame?.legal_notice" )
                        input(type="text" v-model="NewGame.legal_notice")
                .game_content_right
                    .achievements
                        .title Achievements
                        .achievement_img
                            img(v-for="(item,index) in NewGame?.achievements.highlighted.slice(0,10)" :src="item.path" :title="item.name")
                    .game_languages
                        table Platforms
                            tr
                                th
                                th windows
                                th mac
                                th linux
                            tr
                                td
                                td(@click="NewGame.platforms.windows=!NewGame.platforms.windows")
                                    span(:style="{  color:  NewGame.platforms.windows?'red':'#67c1f5'}") ✔
                                td(@click="NewGame.platforms.mac=!NewGame.platforms.mac")
                                    span(:style="{  color:  NewGame.platforms.mac?'red':'#67c1f5'}" ) ✔
                                td(@click="NewGame.platforms.linux=!NewGame.platforms.linux")
                                    span(:style="{  color: NewGame.platforms.linux?'red':'#67c1f5'}"  ) ✔


                    .game_languages
                        table Languages
                            tr
                                th
                                th Interface
                                th Full Audio
                                th Subtitles
                            tr(v-for="(value,key) in NewGame?.languages" :key="key")
                                td  {{key}}
                                td
                                    span(v-if="value?.interface") ✔
                                td
                                    span(v-if="value?.fullAudio") ✔
                                td
                                    span(v-if="value?.subtitles") ✔
</template>

<script setup lang="ts">


import {computed, defineAsyncComponent, onMounted, ref, watchEffect} from "vue";
import type {GameObj, Language} from "../../../utils/types/Game";
import type {ResultInfo} from "../../../utils/types/ResultInfo";
import {GameInfoById, GameUpdateById} from "../../../reqApi/Game";
import GameItemCard from "./GameItemCard.vue";
import {LogSuccess} from "../../../utils/notification/Index";
import {useRouter} from "vue-router";

const MovieBar = defineAsyncComponent(() =>
    import('../MovieBar.vue')
)
const router = useRouter();


const props = defineProps({
        appid: {
            type: String,
            required: false,
        }
    }
)
const IsShowConfirmation = ref(false)
const languages = ref<Map<String, Language>>(new Map<String, Language>())

const NewGame = ref<GameObj>({
    name: "New Game Name",
    steam_appid: 0,
    is_free: true,
    about_the_game: "about_the_game",
    short_description: "short_description",
    header_image: "",
    website: "website",
    legal_notice: "legal_notice",
    languages: languages.value,
    reviews: "",
    developers: [],
    recommendations: {
        total: 0
    },
    publishers: [],
    price_overview: {
        currency: "",
        initial: 0,
        final: 0,
        discount_percent: 0,
        initial_formatted: "",
        final_formatted: "",
    },
    platforms: {
        windows: false,
        mac: false,
        linux: false,
    },
    categories: [],
    genres: [],
    screenshots: [],
    movies: [],
    achievements: {
        total: 0,
        highlighted: [],
    },
    release_date: {
        coming_soon: false,
        date: ""
    },
    support_info: {
        url: "",
        email: "",
    },
    background: "",
    background_raw: "",
    disable: false,


})
//
const itemPanel = ref(false)

const ToChangePanel = () => {
    itemPanel.value = true
}
const NotFous = () => {
    if (confirm("Not Save And Leave")) {
        itemPanel.value = false
        IsShowConfirmation.value = false
    }
    InitGameInfo()
}
/**/
const game_header_fun = () => {
    return [
        {msg: "PUBLISHER", vmode: NewGame.value.publishers[0], data: NewGame?.value?.publishers[0]},
        {msg: "DEVELOPER", vmode: NewGame.value.developers[0], data: NewGame?.value?.developers[0]},
    ]
}

const discount_free = computed(() => {
    return NewGame.value.price_overview.initial === NewGame.value.price_overview.final && NewGame.value.price_overview.final === 0
})
const discount_pct = computed(() => {
    if (NewGame.value.price_overview.initial != 0) {
        let as = (NewGame.value.price_overview.final - NewGame.value.price_overview.initial) / NewGame.value.price_overview.initial;
        return Math.ceil(as * 100)
    }
    return 0
})


const update_game_details = () => {
    IsShowConfirmation.value = true

}
const cancelChange = () => {
    IsShowConfirmation.value = false
}
const confirmChange = () => {
    GameUpdateById({
        steam_appid: Number(props.appid),
        game: NewGame.value
    }).then(resp => {
        const result = resp.data as ResultInfo<any>;
        LogSuccess(result.msg)
        itemPanel.value = false
        IsShowConfirmation.value = false
        InitGameInfo()
    })
}
// ------------------------


const InitGameInfo = () => {
    GameInfoById(
        {
            app_id: Number(props.appid),
        }
    ).then(resp => {
        const result = resp.data as ResultInfo<GameObj>;
        if (result.success && result.data) {
            NewGame.value = result.data;
        }
    });
}
const IsExistGameId = ref(false)
watchEffect(() => {
    console.log("sss")
    IsExistGameId.value = false
    if (NewGame.value.steam_appid != 0) {
        GameInfoById(
            {
                app_id: Number(NewGame.value.steam_appid)
            }
        ).then(resp => {
            const result = resp.data as ResultInfo<GameObj>;
            IsExistGameId.value = result.success
        });
    }
})

onMounted(() => {

        InitGameInfo()
    }
)

</script>


<style lang="sass">

@import "../../../assets/sass/game/gameDetailChange.sass"
</style>
